<template>
	<view class="nft_container_bg">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="item in swiperList" :key="item.index">
				<view class="swiper-item">
					<image class="banner-img" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<u-tabs :list="tablist" @click="changeTab" :inactiveStyle="{color: '#999'}"
				:activeStyle="{color: 'var(--echo-main-color)'}" lineColor="var(--echo-main-color)"></u-tabs>
		<view class="hot-nft" v-if="tabIndex==0">
			<hot-card v-for="(item,idnex) of hotNFT" :key="item.id" :item="item">
			</hot-card>
		</view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
				isidTrue:false,
				tabIndex:0,
	      swiperList: [
	        '../../static/img/lunbo1.png',
	        '../../static/img/lunbo2.png',
	        '../../static/img/lunbo3.png',
	      ],
				tablist: [{
						name: '预售',
					}, {
						name: '发售日历',
					}
				],
				hotNFT:[{
					id:1,
					title:'神秘NFT',
					price:100,
					amount:100,
					remaining:80,
					src:"http://ipfs.flyray.me/ipfs/QmXvvGqqVtEVFWZbWRhoNNrKhtK7za7Zt71gJMtuxWece9",
				},{
					id:2,
					title:'神秘NFT',
					price:100,
					amount:100,
					remaining:90,
					src:"http://ipfs.flyray.me/ipfs/QmXvvGqqVtEVFWZbWRhoNNrKhtK7za7Zt71gJMtuxWece9",
				}]
	    }
	  },
		methods:{
			changeTab(item) {
				console.log(item)
				this.tabIndex = item.index
			},
			authentication() {
				uni.navigateTo({
					url: "/pages/set/identityVerification"
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.nft_container_bg{
		background-color: #262525;
		padding-bottom: 40rpx;
		min-height: 100vh;
		.swiper-item,
		.banner-img {
			width: 100%;
			height: 100%;
		}
		.hot-nft {
			margin: 40rpx 40rpx;
			.hot-nft-id {
				text-align: center;
				color: #fff;
				.identity-icon {
					margin-left: 50%;
					transform: translateX(-120rpx);
				}
				.identity_btn {
					width: 50%;
					font-size: 16px;
				}
				p {
					margin-bottom: 80rpx;
				}
			}
		}
	}
</style>
